<template>
  <div calss="container">
    <div class="main">
      <div class="left">
        <li>导航一<span>></span></li>
        <li>导航一<span>></span></li>
        <li>导航一<span>></span></li>
        <li>导航一<span>></span></li>
      </div>
      <div class="right">
        <img
          v-show="index === i"
          v-for="(v, i) in imgList"
          :key="i"
          :src="v"
          alt=""
        />
      </div>
      <button class="el-icon-arrow-left" @click="leftFn"></button>
      <button class="el-icon-arrow-right" @click="rightFn"></button>
    </div>
    <div class="list">
      <div v-for="(v, i) in list" :key="i">
        <img :src="v.img" alt="" />
        <p>{{ v.title }}</p>
      </div>
    </div>
    <button v-show="flag" @click="loadMore">加载更多</button>
    <table>
      <tr>
        <td>id</td>
        <td>
          全选<input type="checkbox" v-model="checkedAll" @change="checkAll" />
        </td>
        <td>标题</td>
        <td>价格</td>
        <td>数量</td>
      </tr>
      <tr v-for="(v, i) in shop" :key="i">
        <td>{{ v.id }}</td>
        <td>
          <input type="checkbox" @change="checkOdd" v-model="v.status" />
        </td>
        <td>{{ v.title }}</td>
        <td>{{ v.price }}</td>
        <td>
          <button @click="v.num--" :disabled="v.num === 1">-</button>{{ v.num
          }}<button @click="v.num++">+</button>
        </td>
      </tr>
      <tr>
        <td>总价:{{ getMoney.toFixed(2) }}</td>
        <td>总量:{{ getNum }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import http from "@/utils/request";
export default {
  data() {
    return {
      imgList: ["/img/2.jpg", "/img/3.jpg", "/img/5.jpg"],
      list: [],
      lists: [],
      count: 4,
      flag: true,
      index: 0,
      timer: null,
      shop: [],
      checkedAll: false,
    };
  },
  // 计算属性
  computed: {
    getMoney() {
      let sum = 0;
      this.shop.forEach((v) => {
        if (v.status) {
          sum += v.price * v.num;
        }
      });
      return sum;
    },
    getNum() {
      let number = 0;
      this.shop.forEach((v) => {
        if (v.status) {
          number += v.num;
        }
      });
      return number;
    },
  },
  // 方法集合
  methods: {
    checkOdd() {
      this.checkedAll = this.shop.every((v) => {
        return v.status === true;
      });
    },
    checkAll() {
      this.shop.forEach((item) => {
        item.status = this.checkedAll;
      });
    },
    getShop() {
      http.get("/json/shop.json").then((res) => {
        this.shop = res;
      });
    },
    leftFn() {
      this.index = this.index - 1;
      clearInterval(this.timer);
      if (this.index < 0) {
        this.index = this.imgList.length - 1;
      }
      this.autoPlay();
    },
    rightFn() {
      this.index++;
      clearInterval(this.timer);
      if (this.index > this.imgList.length - 1) {
        this.index = 0;
      }
      this.autoPlay();
    },
    getList() {
      http.get("/json/index.json").then((res) => {
        this.lists = res;
        this.list = res.slice(0, this.count);
      });
    },
    loadMore() {
      this.count += 4;
      if (this.count === this.lists.length) {
        this.flag = false;
      }
      this.getList();
    },
    autoPlay() {
      this.timer = setInterval(() => {
        this.index++;
        if (this.index > this.imgList.length - 1) {
          this.index = 0;
        }
      }, 2000);
    },
    // getParams() {
    //   //   console.log(this.$route.params);
    //   console.log(this.$route.query);
    // },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {
    this.getList();
    this.autoPlay();
    this.getShop();
    // this.getParams();
  },
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: {},
};
</script>
<style lang='less' scoped>
.main {
  display: flex;
  .left {
    width: 20%;
  }
  .right {
    width: 400px;
    display: flex;
    overflow: hidden;
    img {
      width: 400px;
      height: 200px;
    }
  }
}
.list {
  width: 120px;
  height: 200px;
  border: 1px solid;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: auto;
  div {
    width: 50%;
    padding: 0 1%;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
